<template>
  <div class="patient-container">
    <van-nav-bar
      class="app-nav-bar"
      title="就诊人管理"
      left-arrow
      @click-left="$router.back()"
    />

    <div v-for="item in patientList">
      <van-cell-group class="patient-wrapper" inset>
        <van-cell>
          <div class="photo-wrapper">
            <van-image
              round
              width="40px"
              height="40px"
              :src="require('../../assets/img/headIcon.jpeg')"
            />
            <span class="patient-name">{{item.name}}</span>
          </div>
          <div>
            <van-tag type="primary">{{item.sex==0?'男':'女' }}</van-tag>
            <van-tag type="primary">{{item.age}}岁</van-tag>
          </div>
          <van-divider />
          <van-row>
            <van-col offset="16" span="8">
              <van-button type="info" size="mini" @click="show=true,cardNo = item.cardNo">就诊卡号</van-button>
              <van-button type="info" size="mini" @click="toDetail(item.id)">详情</van-button>
            </van-col>
          </van-row>
        </van-cell>
      </van-cell-group>
    </div>

    <div class="add-btn-wrapper">
     <div class="add-btn-div" @click="toAdd">
       + 添加就诊人
     </div>
    </div>

    <van-popup v-model="show">{{cardNo}}</van-popup>

  </div>
</template>

<script>
import patientApi from '@/api/patient'
import {mapState} from "vuex";
export default {
  name: "PatientIndex",
  data(){
    return{
      show:false,
      patientList:[],
      cardNo:''
    }
  },
  created() {
    this.init()
  },
  computed:{
    ...mapState(['user'])
  },
  methods:{
    async init(){
      const{data:res} = await patientApi.findByUserId(this.user.userId)
      this.patientList = res.data
    },
    toAdd(){
      this.$router.push('/patient/add')
    },
    toDetail(id){
      this.$router.push({path:'/patient/detail',query:{id:id}})
    }
  }
}
</script>

<style lang="less" scoped>
.patient-wrapper{
  margin-top: 20px;
  .patient-wrapper{
    .photo-wrapper{

    }
  }
}
.add-btn-wrapper{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  background-color: #3296fa;
  .add-btn-div{
    text-align: center;
    font-size: 15px;
    line-height: 30px;
    color: white;
  }
}
</style>
